<template>

  <Panel id="discussion-card" style="width:100%" shadow>
    <div style="justify-content:space-between ;display: flex; margin-top: -20px;">
      
      <div style="justify-content:left; display: flex; margin-left: 20px;">
        <div style="font-size: 20px; margin-right: 20px; ">{{title}}</div>
        <div style="margin-right: 30px;margin-top: 5px;">
          <Dropdown @on-click="onTypeChange">
            <span>{{query.type === '' ? "类别" : displayType[query.type]}}
              <Icon type="arrow-down-b"></Icon>
            </span>
            <Dropdown-menu slot="list">
              <Dropdown-item name="All">全部</Dropdown-item>
              <Dropdown-item name="Solution">题解</Dropdown-item>
              <Dropdown-item name="Share">分享</Dropdown-item>
              <Dropdown-item name="Integrated">问答</Dropdown-item>
            </Dropdown-menu>
          </Dropdown>
        </div>
        <div style="margin-right: 30px;margin-top: 5px;">
          <Dropdown @on-click="onOrderChange">
            <span>{{query.order_by === '' ? this.$i18n.t('m.OrderBy') : this.$i18n.t('m.' + query.order_by)}}
              <Icon type="arrow-down-b"></Icon>
            </span>
            <Dropdown-menu slot="list">
              <Dropdown-item name="hot">{{$t('m.hot')}}</Dropdown-item>
              <Dropdown-item name="new">{{$t('m.new')}}</Dropdown-item>
              <Dropdown-item name="most_view">{{$t('m.most_view')}}</Dropdown-item>
              <Dropdown-item name="most_reply">{{$t('m.most_reply')}}</Dropdown-item>
            </Dropdown-menu>
          </Dropdown>
        </div>            
        <div style="margin-right: 30px;">
          <Input @on-enter="changeRoute" @on-click="changeRoute" v-model="query.problem_id"
                icon="ios-search-strong" placeholder="题号"/>
        </div>
        <div>
          <Input @on-enter="changeRoute" @on-click="changeRoute" v-model="query.keyword"
                icon="ios-search-strong" placeholder="搜索标题"/>
        </div>
      </div>
      <div style="margin-right: 50px; ">
        <Button 
          @click="createDiscussion()"><Icon type="plus"></Icon> {{$t('m.Write')}}
      </Button>
      </div>
    </div> 
    <div style="display: flex;justify-content: center;margin-top: 30px;">
      <Pagination 
        :total="total" 
        :pageSize="limit"
        @on-change="getDiscussionList" 
        :current.sync="page">
      </Pagination>
    </div>

    <p id="no-discussion" v-if="discussions.length == 0">{{$t('m.No_discussion')}}</p>
    <ol id="discussion-list">
      <li v-for="discussion in discussions" :key="discussion.title">
        <Row type="flex" justify="space-between" >
          <!-- <img class="trophy" src="../../../../assets/Discussion.png"/> -->
          <Col :span="24" class="discussion-main">
            <p class="title">
              <a class="entry" @click.stop="goDiscussion(discussion)">
                {{discussion.discussion_title}}
              </a>
              <Button size="small" shape="circle">
                {{displayType[discussion.discussion_type]}}
              </Button>
              <Button v-if="discussion.is_top" 
                  style="background-color:#bb4a; color:#fff" size="small" shape="circle">{{$t('m.Is_Top')}}</Button>

              <Button v-if="discussion.closed" 
                  style="background-color:#f066; color:#fff" size="small" shape="circle">{{$t('m.Is_Closed')}}</Button>
            </p>
            <ul style="font-size: 16px;margin-bottom: 0px; " >        
              <li>
                <i class="el-icon-view"></i> {{discussion.view_number }}
              </li>
              <li>
                <i class="el-icon-chat-line-square"></i> {{discussion.reply_number }}
              </li>
              <li>
                <i class="el-icon-caret-top"></i> 
                {{discussion.like_number }}
              </li>
              <span v-if="isAdmin">
                <li>
                    <a @click="changeTop(discussion.id)">{{$t('m.Is_Top')}}</a>
                </li>
                <li>
                    <a @click="changeClose(discussion.id)">{{$t('m.Is_Closed')}}</a>
                </li>
              </span>

              <li style="float: right;">

              <a @click="goUser(discussion.created_by.username)" style="font-size:20px">{{discussion.created_by.username}}</a>
                创建于  {{discussion.last_edit_time | localtime('YYYY-M-D HH:mm') }}
            </li>
            </ul>
          </Col>
        </Row>
      </li>
    </ol>
  </Panel>

</template>
<script>
  import api from '@oj/api'
  import apiAdmin from '@admin/api'
  import { mapGetters } from 'vuex'
  import utils from '@/utils/utils'
  import { USER_TYPE } from '@/utils/constants'
  import Pagination from '@/pages/oj/components/Pagination'
  import Simditor from '@admin/components/Simditor.vue'
  import time from '@/utils/time'
  const limit = 25
  export default {
    name: 'discussion-list',
    components: {
      Pagination,
      Simditor
    },
    data () {
      return {
        page: 1,
        query: {
          order_by: '',
          keyword: '',
          problem_id: ''
        },
        limit: limit,
        total: 0,
        rows: '',
        title: this.$i18n.t('m.All_Discussion'),
        discussions: [],
        creating: false,
        currentDiscussion: {},
        discussion_type: '',
        problem: {},
        displayType: {'Solution': '题解', 'Share': '分享', 'Integrated': '问答', 'All': '全部'}
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        let route = this.$route.query
        this.query.order_by = route.order_by || ''
        this.query.type = route.type || ''
        this.query.keyword = route.keyword || ''
        // id 号，非显示名
        this.query.problem_id = route.problem_id || ''
        this.page = parseInt(route.page) || 1
        this.getDiscussionList()
        console.log(this.user)
      },
      getDiscussionList (page = 1) {
        let offset = (page - 1) * this.limit
        api.getDiscussionList(offset, this.limit, this.query).then((res) => {
          this.discussions = res.data.data.results
          this.total = res.data.data.total
          this.problem = res.data.data.problem
          if (this.problem !== null) this.title = this.problem._id + ' ' + this.problem.title + this.$i18n.t('m.S_Discussion')
          else this.title = this.$i18n.t('m.All_Discussion')
        })
      },
      changeRoute () {
        let query = Object.assign({}, this.query)
        query.page = this.page
        this.$router.push({
          name: 'discussion-list',
          query: utils.filterEmptyValue(query)
        })
      },
      createDiscussion () {
        this.currentDiscussion = {}
        this.currentDiscussion.discussion_title = ''
        this.currentDiscussion.discussion_type = ''
        this.currentDiscussion.discussion_text = ''
        this.currentDiscussion.editing = true
        api['createDiscussion'](this.currentDiscussion).then((res) => {
          // this.init()
          this.$router.push({name: 'discussion-edit', params: {discussionID: res.data.data.id, problem_id: this.query.problem_id}})
        }).catch()
      },
      changeTop (discussionID) {
        let query = {}
        query.id = discussionID
        query.is_top = true
        apiAdmin['changeDiscussionTop'](query).then(res => {
          this.init()
        }).catch()
      },
      changeClose (discussionID) {
        let query = {}
        query.id = discussionID
        query.closed = true
        apiAdmin['changeDiscussionClose'](query).then(res => {
          this.init()
        }).catch()
      },
      onOrderChange (order) {
        this.query.order_by = order
        this.page = 1
        this.changeRoute()
      },
      onTypeChange (type) {
        this.query.type = type
        this.page = 1
        this.changeRoute()
      },
      onProblemChange (problemId) {
        this.query.problem_id = problemId
        this.page = 1
        this.changeRoute()
      },
      goDiscussion (discussion) {
        const {href} = this.$router.resolve({
          name: 'discussion-details',
          params: {discussionID: discussion.id}
        })
        window.open(href, '_blank')
        // this.$router.push({name: 'discussion-details', params: {discussionID: discussion.id}})
      },
      goUser (username) {
        // const {href} = this.$router.resolve({
        //   name: 'user-home-discussion',
        //   query: {username: username}
        // })
        // window.open(href, '_blank')
        // this.$router.push({
        //   name: 'user-home-discussion',
        //   query: {username: username}
        // })
      },
      getDuration (startTime, endTime) {
        return time.duration(startTime, endTime)
      }
    },
    computed: {
      ...mapGetters(['user', 'theme']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      }
    },
    watch: {
      '$route' (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.init()
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  #discussion-card {
    #no-discussion {
      text-align: center;
      font-size: 16px;
      padding: 20px;
    }
    #discussion-list {
      > li {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 5px;
        padding-top: 5px;
        border-bottom: 1px solid rgba(187, 187, 187, 0.5);
        list-style: none;
        .trophy {
          height: 40px;
          margin-left: 10px;
          margin-right: -20px;
        }
        .discussion-main {
          // padding-bottom: -5px;
          .title {
            font-size: 20px;
            a.entry {
              color: #162735;
              &:hover {
                color: #2d8cf0;
                border-bottom: 1px solid #2d8cf0;
              }
            }
            a.entry-dark {
              color: #fff;
              &:hover {
                color: #2d8cf0;
                border-bottom: 1px solid #2d8cf0;
              }
            }
            a.entry-primary {
              color: #fff;
              &:hover {
                color: #2d8cf0;
                border-bottom: 1px solid #2d8cf0;
              }
            }
          }
          li {
            display: inline-block;
            padding: 10px 0 0 10px;
            &:first-child { 
              padding: 10px 0 0 0;
            }
          }
        }
      }
    }
  }
</style>